<template>
  <div class="HotelDetail">
    <!-- 导航栏 -->
    <userTopMenu></userTopMenu>

    <!-- 酒店详情 -->
    <p style="font-size: 80px; color: burlywood">
      {{ hotelInfo.hotels.hotelName }}
    </p>
    <div style="display: flex; justify-content: space-around">
      <div style="height: 500px; width: 30%; margin: 20px; overflow: hidden">
        <img
          :src="hotelInfo.pictures.picLink"
          alt="酒店图片"
          style="width: 100%; height: 100%"
        />
      </div>
      <div style="width: 70%; margin-top: 30px">
        <el-descriptions column="1" style="font-size: 30px; align-self: center">
          <el-descriptions-item label="地址">{{
            hotelInfo.hotels.hotelAddr
          }}</el-descriptions-item>
          <el-descriptions-item label="联系电话">{{
            hotelInfo.hotels.hotelTelephone
          }}</el-descriptions-item>
          <el-descriptions-item label="标签">
            <el-tag size="small" style="font-size: 30px; align-self: center"
              >{{ hotelInfo.hotels.hotelLabel }}酒店</el-tag
            >
          </el-descriptions-item>
        </el-descriptions>
        <!-- 评分与导航按钮 -->
        <div class="bottom clearfix">
          <el-rate
            v-model="hotelInfo.hotels.overallRating"
            disabled
            show-score
            text-color="#ff9900"
          >
          </el-rate>
          <div style="display: flex; float: right; margin-bottom: 10px">
            <p
              style="
                color: red;
                align-self: center;
                font-weight: bold;
                font-size: 30px;
                margin-right: 20px;
              "
            >
              {{ hotelInfo.hotels.hotelPrice }}
            </p>
            <!-- <el-button type="primary" round @click="go()" size="medium"
              >到这里去</el-button
            > -->
          </div>
        </div>
      </div>
    </div>
    <hr />

    <!-- 房间列表 -->
    <p style="font-size: 80px">房间列表</p>
    <div style="width: 100%; height: 1300px">
      <roomlists :roomlist="roomlist"></roomlists>
    </div>
    <hr />

    <!-- 附近景区 -->
    <p style="font-size: 80px; width: 100%">附近景区</p>
    <landmarksnearby :cardlist="this.cardlist"></landmarksnearby>
    <hr />

    <!-- 评价 -->
    <p v-if="flag" style="font-size: 80px">酒店评论</p>
    <p v-else style="font-size: 50px; text-align: center">暂无评论</p>
    <commentlists :comment="comment" @has-data="hasData()"></commentlists>
  </div>
</template>

<script>
import userTopMenu from "@/components/menu/userTopMenu.vue";
import roomlists from "@/components/lists/roomLists.vue";
import landmarksnearby from "@/components/cards/landmarkCards.vue";
import commentlists from "@/components/lists/commentLists.vue";
export default {
  name: "hoteldetail",
  components: {
    userTopMenu,
    roomlists,
    landmarksnearby,
    commentlists,
  },
  data() {
    return {
      pageDto: {
        hotels: { hotelId: 5 },
      },
      hotelInfo: {hotels:{},pictures:{}},
      // 子组件传参
      cardlist: { page: 1, size: 6, city: "" },
      comment: {},
      // 房间组件
      roomlist:{hotelId:5,hotelName:""},
      // 其他参数
      flag: true,
    };
  },
  methods: {
    // 路由传值
    setParams() {
      this.pageDto.hotels.hotelId = this.$route.params.id;
      //子组件参数设置
      // 评论
      this.comment.relatedEntityType = 3;
      this.comment.relatedEntityId = this.pageDto.hotels.hotelId;
      //评论组件button展示控制
      this.comment.flag = false;
    },
    // 房间参数设置
    setRoomParams(){
      this.roomlist.hotelId = this.pageDto.hotels.hotelId;
      this.roomlist.hotelName = this.hotelInfo.hotels.hotelName;
    },
    // 查询酒店信息
    queryByPage() {
      this.$api.hotelsApi.queryByPage(this.pageDto).then((res) => {
        this.hotelInfo = res.data.data[0];
        this.cardlist.city = this.hotelInfo.hotels.city;
      });
    },
    // 评论
    // 子组件回调
    hasData() {
      this.flag = false;
    },
  },
  watch: {
    hotelInfo: {
      immediate: true,
      deep: true,
      handler(newV, oldV) {
        this.setRoomParams();
      },
    },
  },
  mounted() {
    this.setParams();
    // console.log(this.pageDto.hotels.hotelId);
    this.queryByPage();
  },
};
</script>

<style scoped>
@import url("https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i");
@import url("../../assets//css/home/css/font-awesome.min.css");
@import url("../../assets//css/home/css/linearicons.css");
@import url("../../assets//css/home/css/animate.css");
@import url("../../assets//css/home/css/flaticon.css");
@import url("../../assets//css/home/css/slick.css");
@import url("../../assets//css/home/css/slick-theme.css");
@import url("../../assets//css/home/css/bootstrap.min.css");
@import url("../../assets//css/home/css/bootsnav.css");
@import url("../../assets//css/home/css/style.css");
@import url("../../assets//css/home/css/responsive.css");

/* home */
* {
  padding: 0;
  margin: 0;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
.HotelDetail {
  font-family: "maobi";
  font-size: 20px;
  color: #a09e9c;
  text-transform: initial;
  max-width: 1920px;
  margin: 0 auto;
  overflow-x: hidden;
}
</style>
